<template>
	<view class="container">
		<map id="my_map" :longitude="116.379831" :latitude="39.865557" scale="14" show-location :polyline="polyline"
			style="width: 100%; height: 300px;" :markers="markers">
		</map>
		<view class="body">
			<view class="status">
				运送中
			</view>
			<view class="tips">
				开启微信提醒，接收行程进度消息<text>去开启</text>
			</view>
			<view class="car_info mt10 flex-between">
				<view class="flex">
					<view class="self-center mr10">
						<u-avatar size="60"
							src="https://v4.crmeb.net/uploads/store/comment/20230819/8fe37a89e638c20655b3c5459d0f54dd.jpg"></u-avatar>

					</view>
					<view>
						<view class="car_code ">
							渝AD12345
						</view>
						<u-text text="五菱宏光" color="#333" size="13"></u-text>
						<view class="flex">
							<u-text text="周师傅" color="#333" size="12"></u-text>
							<view class="flex">
								<u-icon name="star-fill" color="#FFB800"></u-icon>
								<u-text text="5.0" size="12"></u-text>
							</view>
						</view>

					</view>
				</view>

				<view class="self-center phone flex-center">
					<u-icon custom-prefix="custom-icon" name="tianchongxing" color="#000"></u-icon>
				</view>
			</view>
			<view class="address  mt10 flex">
				<view class=" mr10 flex-center self-center shou">收
				</view>
				<view>
					<view class="info">
						<text>周先华</text>
						<text style="margin-left: 10px;">{{maskPhoneNumber('17304848274')}}</text>
					</view>
					<view class="loc">
						北京市市辖区东城区东华门街道打我的
					</view>
				</view>
			</view>
			<view class="order_info mt10">
				<view class="title">订单信息 </view>


				<view class="cell-box">
					<view class="cell flex-between">
						<text>商品总价</text>
						<text>￥3500.00</text>
					</view>

					<view class="cell flex-between cellTop">
						<text>实付款</text>
						<text>￥3500.00</text>
					</view>
					<view class="cell flex-between cellTop">
						<text>订单编号</text>
						<view class="flex">wx575708560936140800
							<view class="copy">复制</view>
						</view>
					</view>
					<view class="cell flex-between cellTop">
						<text>下单时间</text>
						<text>2024-10-10 15:40:17</text>
					</view>
					<view class="cell flex-between cellTop">
						<text>支付状态</text>
						<text>未支付</text>
					</view>
					<view class="cell flex-between cellTop">
						<text>支付方式</text>
						<text>微信</text>
					</view>
				</view>

			</view>
		</view>

		<view class="pb-safe"></view>
		<view class="footer">
			<view class="btn-box">
				<view class="btn flex-center">申请开票</view>
				<view class="btn flex-center primary">查看收货码</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import points from "./Data.js"
	import {
		maskPhoneNumber
	} from "@/utils/index.js"
	console.log(points)
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const polyline = ref(
		[{
			points,
			color: "#FF4110",
			borderColor: "#000",
			width: 8,
			arrowLine: true
		}]
	)

	const markers = ref(
		[{
				id: 0,
				latitude: 39.865557,
				longitude: 116.379831,
				width: 25,
				height: 40,
				iconPath: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
				callout: {
					content: '距收获地1公里 ',
					color: 'red',
					fontSize: 12,
					display: 'ALWAYS',
					borderRadius: 10,
					borderColor: '#909399',
				}
			},
			{
				id: 1,
				latitude: points[points.length - 1].latitude,
				longitude: points[points.length - 1].longitude,
				width: 30,
				iconPath: './shou.png',
				height: 30
			}
		])
	const includes = ref([])
	onLoad(() => {
		let MapContext = uni.createMapContext('my_map');
		setInterval(() => {
			polyline.value[0].points = polyline.value[0].points.slice(10)
			includes.value = polyline.value[0].points
			//每次更新路线坐标时，调整地图缩放包含所有点

			// MapContext.includePoints({
			// 	points: polyline.value[0].points,
			// 	padding: [40, 40, 40, 40],
			// })

			//计算角度
			markers.value[0].rotate = getAngle(polyline.value[0].points[0], polyline.value[0].points[1]);
			markers.value[0].latitude = polyline.value[0].points[0].latitude
			markers.value[0].longitude = polyline.value[0].points[0].longitude
		}, 3000)
	})

	//传入两个经纬度点得到车辆角度 设置车辆Marker角度
	const getAngle = (startPoint, endPoint) => {
		if (!(startPoint && endPoint)) {
			return 0;
		}
		let dRotateAngle = Math.atan2(
			Math.abs(startPoint.longitude - endPoint.longitude),
			Math.abs(startPoint.latitude - endPoint.latitude)
		);
		if (endPoint.longitude >= startPoint.longitude) {
			if (endPoint.latitude >= startPoint.latitude) {} else {
				dRotateAngle = Math.PI - dRotateAngle;
			}
		} else {
			if (endPoint.latitude >= startPoint.latitude) {
				dRotateAngle = 2 * Math.PI - dRotateAngle;
			} else {
				dRotateAngle = Math.PI + dRotateAngle;
			}
		}
		dRotateAngle = (dRotateAngle * 180) / Math.PI;
		return dRotateAngle;
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;

		.body {
			position: relative;
			top: -40rpx;
			// width: 100%;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #F3F4F6;
			// background-color: red;
			padding: 0 20rpx;

			.status {
				font-weight: 700;
				line-height: 100rpx;
			}

			.tips {
				padding: 20rpx;
				font-size: 24rpx;
				background-color: #fff;
				border-radius: 10rpx;
			}

			.car_info {
				background-color: #fff;
				padding: 20rpx;
				border-radius: 10rpx;

				.car_code {
					font-weight: 700;
					font-size: 18px;
				}

				.phone {
					background-color: #F8F8F8;
					// background-color: red;
					border: 1px solid #e7ebe4;
					padding: 15rpx;
					border-radius: 50%;
				}
			}

			.address {
				background-color: #fff;
				border-radius: 10rpx;
				padding: 20rpx;

				.shou {
					width: 40rpx;
					height: 40rpx;
					background-color: #FF4110;
					font-size: 24rpx;
					color: #fff;
					border-radius: 100%;
				}

				.info {
					display: flex;
					font-weight: 500;
					display: flex;
					align-items: center;
					font-size: 14px;
				}

				.loc {
					padding-bottom: 4px;
					margin-top: 6rpx;
					width: 100%;
					color: #999;
					font-size: 12px;
				}

				.line {
					height: 1px;
					width: 340px;
					left: 50%;
					transform: translateX(-50%);
					position: absolute;
					bottom: 0;
				}
			}

			.order_info {
				background-color: #fff;
				padding: 20rpx;
				border-radius: 10rpx;

				.title {
					font-weight: 700;
				}


				.cell-box {
					padding: 17px 12px;
					border-radius: 8px;
					margin-top: 10px;
					background-color: #fff;

					.cell {
						font-size: 14px;

						.copy {
							width: 36px;
							height: 19px;
							background: #f5f5f5;
							border-radius: 10px;
							text-align: center;
							line-height: 19px;
							font-size: 11px;
							margin-left: 6px;
						}
					}

					.cellTop {
						margin-top: 21px;
					}
				}

			}
		}

		.pb-safe {
			height: 200rpx;
			padding-bottom: env(safe-area-inset-bottom);
		}

		.footer {
			position: fixed;
			left: 0;
			bottom: 0;
			background-color: #fff;
			width: 100%;
			z-index: 999;
			padding-bottom: env(safe-area-inset-bottom);
			border-top: 1px solid #eee;

			.btn-box {
				padding: 0 10px;
				justify-content: flex-end;
				height: 51px;
				display: flex;
				align-items: center;

				.btn {
					border: 1px solid #ccc;
					width: 76px;
					height: 29px;
					font-size: 12px;
					border-radius: 16px;
					background-color: #fff;
					margin-right: 20rpx;
				}

				.primary {
					color: #fff;
					background-color: #FF4110;
					border: 1px solid #FF4110;
				}
			}
		}
	}
</style>